Tengo una aplicación que usa enlaces dinámicos donde <> es una forma dinámica de obtener valor de la API. Pero cuando intento representarlo en vhtml, ni siquiera muestra el elemento principal. Lo quiero como Nombre: <<Name>> . ¿Cómo se puede lograr esto? . Adjunto el código de ejemplo.
const app = new Vue({ el: '#app', data () { return { htmlText: '<p> Name : <<Name>> </p>' } } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <span v-html="htmlText"></span> </div>Además de las respuestas de Link y Xlm en vue: ¿escapar y representar una cadena HTML?
Analice la cadena entrante con una expresión regular que reemplace < con < y > con >
Tenga en cuenta que esto podría ser sólo una solución . Si desea una solución más limpia , debe hacerlo en la API .
En tu caso,
const app = new Vue({ el: "#app", data() { return { htmlText: "<p> Name : <<Name>> </p>", }; }, methods: { htmlToText(html) { return html.replace(/<</g, "<<").replace(/>>/g, ">>"); }, }, }); <div id="app"> <span v-html="htmlToText(htmlText)"></span> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>